<template>
  <view class="example-box">
    <view class="title">赵无极的研发中心示例页面</view>
    <view class="first-level-title">ui组件：</view>
    <!-- 表格 -->
    <view class="second-level-title">一、表格</view>
    <zcgTable :columns="columns" :tableData="tableData" :maxHeight="150">
      <!-- 收货数量-->
      <template #informationLetterFileList="{ row }">
        {{ row.informationLetterFileList }}
      </template>
    </zcgTable>
    <view class="second-level-title">二、描述</view>
    <zcgDescribe :columns="describeColumns" :describeData="describeData" :arrange="2">
      <!-- 收货数量-->
      <template #informationLetterFileList="{ row }">
        {{ row.informationLetterFileList }}
      </template>
    </zcgDescribe>
    <view class="first-level-title">工具：</view>
    <view class="second-level-title">一、数字转换</view>
    <input
      type="text"
      v-model="inputNumber"
      placeholder="请输入"
      style="border: 1px solid #ccc; padding: 5px; border-radius: 5px"
    />
    <view class="btn" @click="btnPhone">手机号带空格</view>
    <view class="btn" @click="btnMoney">转换资金千分位</view>
    <view class="btn" @click="btnRemove">去除千分位</view>
    <view class="btn" @click="btnZero">数字补零</view>
    <view class="btn" @click="btnFilter">过滤对象</view>
    <view class="btn" @click="btnClone">深拷贝</view>
  </view>
</template>

<script>
import { tableColumns, describeColumns } from './data'
export default {
  data() {
    return {
      columns: tableColumns,
      tableData: [],
      tableData1: [
        {
          remark: '备注1',
          informationLetterFileList: '1',
          lineNum: '采购订单行号1',
        },
        {
          remark: '备注2',
          informationLetterFileList: '2',
          lineNum: '采购订单行号2',
        },
        {
          remark: '备注3',
          informationLetterFileList: '3',
          lineNum: '采购订单行号3',
        },
        {
          remark: '备注4',
          informationLetterFileList: '4',
          lineNum: '采购订单行号4',
        },
        {
          remark: '备注5',
          informationLetterFileList: '5',
          lineNum: '采购订单行号5',
        },
        {
          remark: '备注6',
          informationLetterFileList: '6',
          lineNum: '采购订单行号6',
          lineNum1: '采购订单行号6',
        },
      ],
      describeColumns: describeColumns,
      describeData: {
        remark: '111',
        informationLetterFileList: '222',
        lineNum: '33333',
        lineNum1: '44444',
      },
      inputNumber: '',
    }
  },
  methods: {
    btnPhone() {
      console.log(this.inputNumber, '--原值')
      console.log(uni.$zcgTool.formatPhoneNum(this.inputNumber), '--新值')
    },
    btnMoney() {
      console.log(this.inputNumber, '--原值')
      console.log(uni.$zcgTool.transNum(this.inputNumber), '--新值')
    },
    btnRemove() {
      console.log(this.inputNumber, '--原值')
      console.log(uni.$zcgTool.delcommafy(this.inputNumber), '--新值')
    },
    btnZero() {
      console.log(this.inputNumber, '--原值')
      console.log(uni.$zcgTool.returnFloat(this.inputNumber), '--新值')
    },
    btnFilter() {
      console.log(this.inputNumber, '--原值')
      console.log(uni.$zcgTool.filterObj(this.inputNumber), '--新值')
    },
    btnClone() {
      console.log(this.inputNumber, '--原值')
      console.log(uni.$zcgTool.deepClone(this.inputNumber), '--新值')
    },
  },
}
</script>

<style lang="scss" scoped>
.example-box {
  padding: 20rpx;
  font-size: 28rpx;
  .title {
    font-size: 54rpx;
    font-weight: bold;
    margin: 20rpx 0 40rpx 0;
    text-align: center;
  }
  .first-level-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .second-level-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .btn {
    display: inline-block;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    margin: 10rpx;
    color: #fff;
    background-color: rgb(123, 118, 232);
  }
}
</style>
